<template>
  <div v-if="!getIsPhone" class="my-report">
    <account-header></account-header>
    <div class="main-wrapper">
      <div class="main box-shadow">
        <account-tab 
          :activeIndex="activeIndex"
          :tabs="tabs"
          @click="updateActiveIndex"
        ></account-tab>
        <div class="pickers border-bottom">
          <dropdown-picker 
            :iconClass="'iconsx_riqi'"
            class="dropdown-picker-adjust"
            :showSelections="showTimePicker"
            :selectedContent="selectedTime"
            >
          </dropdown-picker>
          <recent-days @click="updateRecentIndex" :activeRecentIndex="activeRecentIndex"></recent-days>
          <div class="search-wrapper">
            <input-search @click="updateSearchContent"></input-search>
          </div>
        </div>
        <div class="reports">
          <component :is="currentComponent"></component>
        </div>
      </div>
    </div>
  </div>
  <div class="my-report" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text">
            盈亏报表
          </span>
        </div>
      </template>
      <template v-slot:right>
        <input-search></input-search>
      </template>
    </header-template-phone>
    <records-selector 
      :selectedData="currentLotteryType"
      @show-picker="slideUpTimePicker"
      @update-index="updateActiveIndex"
      @update-time="updateSelectedTime"
      @click="slideUpReportType"
      :switchName="switchName"
      :activeIndex="activeIndex"
    >
    </records-selector>
    <div class="main">
      <selected-time :time="selectedTime"></selected-time>
      <div class="report">
        <component :is="currentComponent" :fieldKey="k" :type="currentLotteryType"></component>
      </div>
    </div>
    
    <slide-up-buttons 
      @click="hideReportType"
      @hide="foldReportType"
      :show="showReportType"
      :dataList="reportType"
      :activeReportIndex="activeReportIndex"
      >
    </slide-up-buttons> 
  </div>
</template>

<script>
import AccountHeader from '@/components/header/account-header/account-header'
import AccountTab from '@/pages/my-account/components/account-tab'
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
import RecentDays from '@/pages/my-account/components/recent-days'
import GroupReport from './components/group-report'
import PersonalReport from './components/personal-report'
import SelectedTime from '@/components/base/selected-time/selected-time'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import InputSearch from '@/components/input-search/input-search'
import RecordsSelector from '@/components/records-selector/records-selector'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpButtons from '@/components/slide-up-buttons/slide-up-buttons'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    AccountHeader,
    AccountTab,
    RecentDays,
    DropdownPicker,
    GroupReport,
    PersonalReport,
    HeaderTemplatePhone,
    HeaderBack,
    InputSearch,
    RecordsSelector,
    BcModal,
    SlideUpButtons,
    SelectedTime 
  },
  data() {
    return {
      // pc
      tabs: [
        {
          id: 1,
          name: '团队盈亏',
          component:'GroupReport'
        },
        {
          id: 2,
          name: '个人报表',
          component: 'PersonalReport'
        }
      ],
      reportType: [
        {
          id: 1,
          name: '消费',
          type: 'consume'
        },
        {
          id: 2,
          name: '中奖',
          type: 'benefit'
        },
        {
          id: 3,
          name: '彩票返点',
          type: 'lottryrefund'
        },
        {
          id: 4,
          name: 'BJ返水',
          type: 'bjrefund'
        },
      ],
      // mobile 
      switchName: [
        {name: '团队盈亏'},
        {name: '个人报表'},
      ],
      // pc头部switch
      activeIndex: 0,
      // 最近几天 
      activeRecentIndex: 0,
      // 
      showTimePicker: false,
      showReportType: false,
      currentLotteryType: '消费',
      //mobile 
      activeReportIndex: 0,
      selectedTime: '今天',
      searchContent: ''
    }
  },
  methods:{
    // 团队/个人
    updateActiveIndex(index) {
      this.activeIndex = index
    },
    // pc最近几天
    updateRecentIndex(index) {
      this.activeRecentIndex = index
    },
    slideUpTimePicker() {
      this.showTimePicker = true
    },
    slideUpReportType() {
      this.showReportType = true
    },
    hideReportType(index) {
      this.showReportType = false
      this.activeReportIndex = index
      this.currentLotteryType = this.reportType[index].name
    },
    foldReportType() {
      this.showReportType = false
    },
    updateSelectedTime(time) {
      this.selectedTime = time
    },
    updateSearchContent(value) {
      this.searchContent = value 
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    currentComponent() {
      let component = ''
      switch(this.activeIndex) {
        case 0:
          component = 'GroupReport'
          break;
        case 1:
          component = 'PersonalReport'
      }
      return component
    },
    k() {
      let k = ''
      switch(this.activeReportIndex) {
        case 0: 
          k = 'groupExpences'
          break;
        case 1: 
          k = 'totlaBonus'
          break;
        case 2: 
          k = 'lotteryRefund'
          break;
        case 3: 
          k = 'bjRefund'
          break;
      }
      return k
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .billboard-adjust >>> .content 
      margin-bottom 0 !important
    .billboard-adjust >>> .bg-bar 
      width 101% !important
    .billboard-adjust  
      margin 0 12px
    .my-report
      width 100%
      .main-wrapper 
        box-sizing border-box
        padding-top 128px 
        .main 
          box-sizing border-box 
          width 1200px 
          margin 0 auto
          margin-top 10px
          background #fff
          margin-top 10px 
          border-radius 3px
          .pickers 
            // height 48px
            display flex
            align-items center
            box-sizing border-box 
            padding 10px 20px 0 20px
            background #fff
            .tab-switch 
              margin-right 20px
            .dropdown-picker 
              margin-right 10px
            .search-wrapper 
              flex 1
              display flex 
              justify-content flex-end
            .search-wrapper >>> .dropdown-picker 
              width 190px 
              margin-right 0
              .lottery-name 
                width 155px 
                input 
                  width 155px 
                  box-sizing border-box 
                  padding-left 10px 
                  outline none
                  background none
          .account-info 
            width 100%
            padding 12px 25px
            box-sizing border-box
            background #faf8f8
            align-items center
            .billboard-content 
              width 100% 
              display flex
              height 45px
              background #fff
              padding 15px 0
              .item 
                width 33.33% 
                display flex 
                flex-direction column 
                justify-content center
                box-sizing border-box 
                .title 
                  margin-bottom 10px
                  color $color-sub-grey
                .statistics
                  display inline-block
                  span 
                    font-size 15px
                  .extra 
                    display inline-block
                    font-size 10px
                  &.amount 
                    color $color-primary-green
                  &.bonus
                    color $color-theme-red
                  &.profit 
                    color $color-theme-red
          .orders  
            .load-more 
              height 60px 
              line-height 60px 
              text-align center
          .orders >>> .el-table 
            tr 
              height 40px 
              line-height 40px
              padding-top 0
            th 
              padding 0
              background #e7e0dd
              color $color-theme-dark
              font-weight 700
              .cell
                padding-left 20px
            td 
              padding 0
              height 40px
              line-height 40px
              // &.el-table_2_column_12
              //   color $color-lose-money
              // &.el-table_2_column_13  
              //   color $color-theme-red
              .cell 
                padding-left 20px
                height 21px
                button 
                  color $color-sub-grey
                  padding 0
  @media screen and (max-width 750px)
    .my-report 
      .main
        box-sizing border-box 
        padding-top 88px 
        .time-selected 
          height 24px
          line-height 24px
          text-align center
          color $color-sub-grey
          display flex 
          align-items center
          justify-content space-between
          margin-bottom 5px
          .line 
            height 1px 
            flex 1
            border-top 1px dashed #cccdd0
          .context 
            margin 0 10px
          
</style>